<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            line-height: 200px;
            background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);;
        }
    </style>
</head>
<body>
    <center>
        <div>
            <h1 id="seconds">0</h1>
        </div>
        <button class="layui-btn" id="start">开始</button>
        <button class="layui-btn layui-btn-danger" onclick="pause()">暂停</button>
        <button class="layui-btn layui-btn-normal" id="reset">重置</button>
    </center>

    <script>

        var i = 0;
        var seconds = document.getElementById('seconds');
        var state;
        function start(){
            state = setInterval(function(){
                i++;
                seconds.innerHTML = i;
            },1000);
        }

        function pause(){
            clearInterval(state);
        }

        function reset(){
            i = 0;
            seconds.innerHTML = i;
        }

        // 绑定事件
        //第一种
        document.getElementById('start').onclick = start;
        //空间通过onxxxx = "";

        //第三种
        document.getElementById('reset').addEventListener('click',reset)
    </script>
</body>
</html>